import Taro, { Component } from '@tarojs/taro'
import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
import './index.scss'
import {
  CustomAdOne,
  CustomAdThree,
  CustomFive,
  CustomFour,
  CustomNavOne,
  CustomSix,
  CustomTwo,
  CustomThree,
  GoodsOneList,
  GoodsTwoList,
  GoodsThreeList,
  GoodsFourList
} from "@/components/index"
import { getAppletConfig} from "@/utils/storage"
import { toAnyPage, toNewsListPage } from "@/utils/page_router"

interface IProps {
  list: any
}

export default class CustomHome extends Component<IProps, {}> {
  props: any

  static options = {
    addGlobalClass: true
  }

  render() {
    const { list=[] } = this.props
    return (<View className='custom-home'>
      {list.map((c, k) => {
        const { configName } = c
        return (<View key={k} className='custom-item'>
          {/*广告*/}
          {configName == 'ads' && c.showMod == 1 && <CustomAdOne list={c.items} autoplay/>}
          {configName == 'ads' && c.showMod == 2 && <CustomAdOne list={c.items} padding={30}/>}
          {configName == 'ads' && c.showMod == 3 && <CustomAdThree list={c.items}/>}

          {/*分类*/}
          {c.configName === 'category' && <CustomNavOne list={c.items} number={c.showMod}/>}

          {/*新闻通知*/}
          {c.configName === 'news' && <View className='news-notice f-g-4'>
            <Image src={getAppletConfig('homeNewsLogo')} className='notice-icon' onClick={() => toNewsListPage()}/>
            <Swiper circular autoplay={c.items && c.items.length > 1} vertical interval={10000} skipHiddenItemLayout={true} className='notice-swiper'>
              {c.items.map((t, k) => {
                // @ts-ignore
                return (<SwiperItem key={k} className='f-g-4' onClick={() => toAnyPage(t.url)} catchtouchmove>
                  <View className='t-o-e'>{t.title}</View>
                </SwiperItem>)
              })}
            </Swiper>
          </View>}

          {c.configName === 'diy' && [1, 2, 3, 4, 5, 6, 8, 9].indexOf(Number(c.showMod)) >= 0 && <View className='one-wrap'>
            <View className='custom-head'>
              <View className='d-f a-i-b j-c-b'>
                <View className='custom-title'>{c.name}</View>
                <View className='custom-more d-f a-i-c' onClick={() => toAnyPage(c.moreUrl)}>
                  {c.moreName}{c.moreName && <View className='bnn-icon'>&#xe866;</View>}
                </View>
              </View>
              {c.coverImg && <View className='custom-banner'>
                <Image mode="widthFix" src={c.coverImg}/>
              </View>}
            </View>
            <View className='custom-body'>
              {c.showMod == 1 && <GoodsOneList list={c.items}/>}
              {c.showMod == 2 && <CustomTwo list={c.items}/>}
              {c.showMod == 3 && <CustomThree list={c.items}/>}
              {c.showMod == 4 && <CustomFour list={c.items}/>}
              {c.showMod == 5 && <CustomFive list={c.items}/>}
              {c.showMod == 6 && <CustomSix list={c.items}/>}
              {c.showMod == 8 && <GoodsTwoList list={c.items}/>}
              {c.showMod == 9 && <GoodsFourList list={c.items}/>}
            </View>
          </View>}

          {c.configName === 'diy' && [7].indexOf(Number(c.showMod)) >= 0 && <View className='two-wrap d-f f-d-c'>
            <View className='wrap-head d-f'>
              <Image mode="widthFix" src={c.coverImg}/>
            </View>
            <View className='wrap-body'>
              <View className='body-head d-f a-i-b j-c-b'>
                <View className='head-title'>{c.name}</View>
                <View className='head-more d-f a-i-c' onClick={() => toAnyPage(c.moreUrl)}>
                  {c.moreName}{c.moreName && <View className='bnn-icon'>&#xe866;</View>}
                </View>
              </View>
              <GoodsThreeList list={c.items}/>
            </View>
          </View>}
        </View>)
      })}
    </View>)
  }
}
